<template>
  <div class="sub-out ">
    <div class="search_all  border_style bg_style">
      <YsInput class="search-input" clearable @on-focus="clickBlur(true)" @on-blur="clickBlur(false)" @on-enter="getShelvesAppList" placeholder="请输入关键字" v-model="pege_param.query_keyword">
        <YsIcon type="icon iconfont icon-sousuo" @click.native="getShelvesAppList" :style="{color: inputFocus?'#405680':'rgba(64,86,128,0.6)'}" slot="suffix" />
      </YsInput>
      <Select style="width:200px;margin-right:10px" class="select-border" v-model="page.subscribeState">
        <Option v-for="(item, index) in page.subscribelist" :value="item.state" @click.native="getShelvesAppList" :key="index" :label="item.name">{{ item.name }}</Option>
      </Select>
      <YsButton type="primary" class="searchBtn" @click="getShelvesAppList">查询</YsButton>
      <div class="open-btn">
        <YsButton class="searchBtn" @click="setAdoptReject(1)">通过</YsButton>
        <YsButton class="searchBtn" @click="setAdoptReject(2)" style="margin-left:10px">拒绝</YsButton>
      </div>
    </div>
    <proTable ref="subscribeTableDom" class="table-st border_style bg_style" :loading="page.tableLoad" :columns="page.columns" :data="page.data" @selectionDada="getselectionDada" @clickPage="onClickPage" :current="pege_param.start_recd" :total="page.allTotal"
      :pageSize="pege_param.limit_recd"></proTable>

    <refuse-modal ref="errorDom" @error_click="errorClick"></refuse-modal>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import RefuseModal from '@/components/refuse/refuseModal.vue'
export default {
  name: "application",
  components: {
    RefuseModal
  },
  data() {
    return {
      inputFocus: false,
      setappflag: 0,
      set_up: {
        exa_cause: "",
        manageInfos: []
      },
      pege_param: {
        state: null,//没有类型
        query_keyword: "",
        start_recd: 1,//开始数据
        limit_recd: 14,//查询的条数
        type: 2
      },

      page: {
        tableLoad: false,
        allTotal: 0,
        subscribeState: 4,
        subscribelist: [
          { state: 4, name: '全部状态' },
          { state: 0, name: '未审批' },
          { state: 1, name: '已上架' },
          { state: 2, name: '未通过' },
          { state: 3, name: '已下架' }
        ],
        columns: [
          {
            type: "selection",
            width: 60,
            className: "selecLeft",
            align: "center",
            tooltip: true
          },
          {
            title: "编号",
            minWidth: 80,
            tooltip: true,
            key: "manage_code",
          },
          {
            title: "发布单位名称",
            minWidth: 120,
            key: "company_name",
            tooltip: true,
            render: (h, params) => {
              if (params.row.company_name == null || params.row.company_name == '') {
                return h('td', { class: 'text-overflow' }, '--')
              } else {
                return h('td', { class: 'text-overflow' }, params.row.company_name)
              }
            }
          },
          {
            title: "应用名称",
            minWidth: 100,
            key: "app_name",
            tooltip: true,
            render: (h, params) => {
              if (params.row.app_name == null || params.row.app_name == '') {
                return h('td', { class: 'text-overflow' }, '--')
              } else {
                return h('td', { class: 'text-overflow' }, params.row.app_name)
              }
            }
          },
          {
            title: "状态",
            minWidth: 100,
            key: "state_name",
            tooltip: true,
            render: (h, params) => {
              if (params.row.exa_res == 1) {
                return h('div', { class: 'setAllStyle setStyle1 ' }, params.row.state_name)
              } else if (params.row.exa_res == 2) {
                return h('div', { class: 'setAllStyle  setStyle3' }, params.row.state_name)
              } else if (params.row.state == 2) {
                return h('div', { class: 'setAllStyle setStyle2' }, params.row.state_name)
              } else if (params.row.exa_res == 3) {
                return h('div', { class: 'setAllStyle setStyle4' }, params.row.state_name)
              } else {
                return h('div', {}, params.row.state_name)
              }
            }
          },
          {
            title: "上架时间",
            tooltip: true,
            minWidth: 100,
            key: "manage_time",
          },
          {
            title: "审批时间",
            tooltip: true,
            minWidth: 170,
            key: "exa_time",
            render: (h, params) => {
              if (params.row.exa_time == null || params.row.exa_time == '') {
                return h('td', { class: 'text-overflow' }, '--')
              } else {
                return h('Tooltip', {
                  props: {
                    placement: 'bottom'
                  }
                }, [
                  params.row.exa_time,
                  h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, params.row.exa_time)
                ])
              }
            }
          },
          {
            title: "操作",
            width: 150,
            // align: "center",
            render: (h, params) => {
              let _this = this
           
              if (params.row.state == 2) {
                return h("div", [
                  h("span", {
                    domProps: { innerText: "通过" },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        _this.set_up.exa_cause = ""
                        if (_this.set_up.manageInfos.length > 1) {
                          _this.$YsMessage.info('请点击批量操作按钮');
                          return
                        } else if (_this.set_up.manageInfos.length == 1) {
                          if (_this.set_up.manageInfos[0].id != params.row.id) {
                            _this.$YsMessage.info('请点击批量操作按钮')
                            return
                          }
                        }
                        _this.set_up.manageInfos[0] = { id: params.row.id, obj_id: params.row.obj_id, exa_res: 1 }
                        _this.handleAppStateClick();
                      },
                    }
                  }),
                  h("span", {
                    domProps: { innerText: "拒绝" },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        _this.$refs.errorDom.textIntro = ""
                        _this.set_up.exa_cause = ""
                        if (_this.set_up.manageInfos.length > 1) {
                          _this.$YsMessage.info('请点击批量操作按钮');
                          return
                        } else if (_this.set_up.manageInfos.length == 1) {
                          if (_this.set_up.manageInfos[0].id != params.row.id) {
                            _this.$YsMessage.info('请点击批量操作按钮')
                            return
                          }
                        }
                        _this.set_up.manageInfos[0] = { id: params.row.id, obj_id: params.row.obj_id, exa_res: 2 }
                        _this.$refs.errorDom.$refs.refuseDom.show()
                      },
                    }
                  }),
                  h("span", {
                    class: "textColor",
                    domProps: { innerText: "测试" },
                  }),
                ]);
              } else if (params.row.exa_res == 2) {
                return h("div", [
                  h("span", {
                    style: {
                      color: '#0091FF',
                      cursor: 'pointer'
                    },
                    domProps: { innerText: "测试" },
                  }),
                ]);
              } else {
                if (params.row.exa_res == 3) {
                  return h("div", [
                    h("span", {
                      domProps: { innerText: "测试" },
                      class: "textColor",
                    }),
                  ]);
                } else {

                  return h("div", [
                    h("span", {
                      class: "textColor",
                      domProps: { innerText: "下架" },
                      on: {
                        click: (event) => {
                          _this.set_up.exa_cause = ""
                          if (_this.set_up.manageInfos.length > 1) {
                            _this.$YsMessage.info('请点击批量操作按钮');
                            return
                          } else if (_this.set_up.manageInfos.length == 1) {
                            if (_this.set_up.manageInfos[0].id != params.row.id) {
                              _this.$YsMessage.info('请点击批量操作按钮')
                              return
                            }
                          }
                          _this.set_up.manageInfos[0] = { id: params.row.id, obj_id: params.row.obj_id, exa_res: 3 }
                          _this.handleAppStateClick();
                        },
                      }

                    }),
                    h("span", {
                      domProps: { innerText: "测试" },
                      class: "textColor",
                    }),
                  ]);
                }

              }
            },
          },
        ],
        data: [],
      },
    };
  },
  methods: {
    ...mapActions(['getQueryPageAppManage', "uploadAppUpExa"]),
    //获取服务列表
    getShelvesAppList() {
      let _this = this
      this.page.tableLoad = true
      _this.pege_param.state = this.page.subscribeState == 4 ? null : this.page.subscribeState
      _this.getQueryPageAppManage(this.pege_param).then(res => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false
        if (status === 'ok') {
          this.page.data = data.beans
          this.page.allTotal = data.all_recd
        } else {
          _this.$YsMessage.error(msg);
          this.page.data = []
          this.page.allTotal = 0
        }
      }).catch(err => {
        _this.page.tableLoad = false
        _this.$YsMessage.error('获取数据失败');
      })
    },
    //分页
    onClickPage(pageNum) {
      this.page.currentPage = pageNum;
      this.pege_param.start_recd = pageNum
      this.getShelvesAppList(this.pege_param)
    },
    //批量设置通过还是拒绝
    setAdoptReject(num) {
      if (this.set_up.manageInfos.length > 0) {
        this.set_up.manageInfos.map(item => { item.exa_res = num })
        if (num == 1) {
          this.handleAppStateClick()
        } else {
          this.$refs.errorDom.$refs.refuseDom.show()
        }
      } else {
        this.$YsMessage.warning('请勾选数据');
      }
    },
    //获取选中的内容
    getselectionDada(data) {
      this.set_up.manageInfos = data.map((item, index) => {
        return Object.assign({}, { id: item.id, obj_id: item.obj_id })
      })
    },
    //app订阅是否 通行
    handleAppStateClick() {
      let _this = this
      _this.uploadAppUpExa(_this.set_up).then(res => {
        let { data, msg, scode, status } = res;
        _this.set_up = _this.$options.data().set_up
        if (status === 'ok') {
          _this.$YsMessage.success(data.message_text);
          _this.$refs.errorDom.$refs.refuseDom.close()

          _this.getShelvesAppList()
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('提交失败');
      })

    },
    //错误原因
    errorClick(text = "") {
      if (typeof text === 'boolean') {
        this.set_up = this.$options.data().set_up
      } else {
        this.set_up.exa_cause = text
        this.handleAppStateClick();
      }
    },
    //获取焦点失去焦点
    clickBlur(flag) {
      this.inputFocus = flag
    }
  },
  mounted() {
    this.getShelvesAppList()
  },
};
</script>
<style lang="less" scoped>
.sub-out {
  min-width: 790px;
}
.search_all {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 72px;
  border: 1px solid #cfd7e5;
  border-radius: 4px;
  margin-bottom: 8px;
  .search-input {
    height: 40px;
    width: 208px;
    margin-right: 10px;
    border-radius: 4px;
  }

  .search-btn {
    margin-left: auto;
  }
  .open-btn {
    margin-left: auto;
  }
}
/deep/.setAllStyle {
  width: 81px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  color: #ffffff;
}
/deep/.setStyle1 {
  background: #13b38f;
}
/deep/.setStyle2 {
  background: rgba(0, 145, 255, 1);
}
/deep/.setStyle3 {
  background: #e77930;
}
/deep/.setStyle4 {
  background: #d53939;
}

/deep/.selecLeft {
  .ivu-checkbox {
    margin-right: 0;
  }
}

/deep/ .ivu-select-arrow {
  font-size: 24px !important;
}
/deep/ .textColor {
  // color: '#0091FF';
  cursor: pointer;
  color: #0091ff;
  margin-right: 8px;
  &:hover {
    opacity: 0.8;
  }
}

.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
.table-st {
  border: 1px solid #cfd7e5;
  border-radius: 4px;
}
</style>
